<template>
  <div id="goodsActivity">
    <h1 class="con-right-title">
      商品活动管理
    </h1>
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:goodsActivity:create'"
        type="warning"
        icon="el-icon-plus"
        @click="addActives"
      >
        新增活动
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%;"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="60" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="活动编号"
        prop="activityNum"
        min-width="90"
      ></el-table-column>
      <el-table-column
        label="活动名称"
        prop="name"
        min-width="90"
      ></el-table-column>
      <el-table-column label="活动类型" prop="activityType" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.activityType">
            {{
              scope.row.activityType | filterName('activity_course_type')
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="活动时间"
        prop="createTime"
        min-width="120"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            <span> {{ scope.row.activityStartTime }}</span>
            <br />
            <span>至</span>
            <br />
            <span
              v-if="
                scope.row.activityTimeData.activityTimeType === 'SPECIFIED_TIME'
              "
            >
              {{ scope.row.activityEndTime }}</span
            >
            <span
              v-else-if="
                scope.row.activityTimeData.activityTimeType === 'LONG_TERM'
              "
            >
              长期有效</span
            >
            <span v-else-if="!scope.row.activityTimeData.activityTimeType"
              >-</span
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="赠送商品" prop="version" min-width="160">
        <template slot-scope="scope">
          <span v-for="(item, index) of scope.row.courseNames" :key="index">
            {{ item.name }}<br />
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="参与/发放用户"
        prop="activityUserRangeConfig.userRangeType"
        min-width="90"
      >
        <template slot-scope="{ row }">
          <span>
            {{
              row.activityUserRangeConfig.userRangeType
                | filterName('activity_course_user_type')
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="活动状态" prop="activityStatus" min-width="90">
        <template slot-scope="scope">
          <span v-if="scope.row.activityStatus">
            {{
              scope.row.activityStatus | filterName('activity_course_status')
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createdTime"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="实际结束时间"
        prop="actualEndTime"
        min-width="110"
        align="center"
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.actualEndTime || '-' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="135" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:status'"
            @click="handleAction('start', scope.row)"
            v-if="scope.row.activityStatus === 'NOT_STARTED'"
          >
            启用
          </el-button>
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:status'"
            @click="handleAction('end', scope.row)"
            v-if="scope.row.activityStatus === 'IN_PROGRESS'"
          >
            结束
          </el-button>
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:edit'"
            @click="handleAction('edit', scope.row)"
            v-if="
              scope.row.activityStatus === 'IN_PROGRESS' ||
                scope.row.activityStatus === 'NOT_STARTED'
            "
          >
            编辑
          </el-button>
          <el-button
            type="text"
            @click="handleAction('delete', scope.row)"
            v-if="scope.row.activityStatus === 'NOT_STARTED'"
            v-permission="'wh:goodsActivity:delete'"
          >
            删除
          </el-button>
          <span v-if="scope.row.activityStatus == 'CLOSED'">-</span>
        </template>
      </el-table-column>
      <el-table-column label="更多" width="200" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:view'"
            @click="handleAction('details', scope.row)"
          >
            详情
          </el-button>
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:receiveRecord'"
            @click="handleAction('receiveHistory', scope.row)"
          >
            领取记录
          </el-button>
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:viewData'"
            @click="handleAction('statistics', scope.row)"
          >
            数据
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 进行中编辑弹窗 -->
    <editDialog
      :editFormInline="editFormInline"
      @toSearch="toSearch"
    ></editDialog>
    <!-- 查看数据弹窗 -->
    <viewData :formViewData="formViewData"></viewData>
    <!-- 点击详情右侧抽屉 -->
    <drawer
      v-if="drawFormInline.drawer"
      :drawFormInline="drawFormInline"
    ></drawer>
  </div>
</template>

<script>
import topSearch from '@component/goodsActivityManagement/topSearch' // 上部搜索条件
import editDialog from '@component/goodsActivityManagement/editDialog' // 编辑调整活动时间弹窗
import viewData from '@component/goodsActivityManagement/viewData' //点击数据弹窗
import drawer from '@component/goodsActivityManagement/drawer' //右侧抽屉
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getGivingCoursesList, // 赠课商品活动列表
  stopGivingCourses, // 立即结束赠课
  deleteGivingCourses, // 根据活动id删除赠课活动
  getGivingCoursesDetail, // 根据活动id查询赠课活动详情
  getGivingCoursesStatistics, //赠课活动统计
  startGivingCourses //启用活动
} from '@/api/goodsActivityManagement'
import { sysNormalDisable } from '@utils/dictionariesFunc'

export default {
  name: 'goodsActivityManage',
  msg: '商品活动管理',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    editDialog,
    viewData,
    drawer
  },
  data() {
    return {
      drawFormInline: {
        drawer: false,
        dranData: {}
      },
      formViewData: {
        show: false,
        participateCount: '',
        productsCount: '',
        receiveCount: '',
        name: '', //活动名称
        activityNum: '', //编号
        activityStartTime: '', //活动开始时间
        activityEndTime: '' //活动结束时间
      },
      loading: false,
      total: 0, // 搜索条件
      editFormInline: {
        id: '',
        show: false,
        startDate: '',
        endDate: '',
        activityTimeType: ''
      },
      formInline: {
        activityNum: '', //活动编号
        activityStatus: '', // 活动状态
        activityType: '', //活动类型
        name: '' //活动名称
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 表格数据
      tableData: [],
      dialogData: {
        isShow: false, // 默认隐藏
        params: '', // 默认新增
        type: 'add' // 默认新增
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
    this.searchList()
  },
  async mounted() {
    await Promise.all([
      sysNormalDisable(
        'activity_course_user_type',
        'activity_course_user_type'
      ),
      sysNormalDisable(
        'giving_activity_effectiveness',
        'giving_activity_effectiveness'
      ),
      sysNormalDisable('goods_type', 'goods_type'),
      sysNormalDisable('giving_condition_type', 'giving_condition_type'),
      sysNormalDisable('giving_course_time_type', 'giving_course_time_type')
    ])
    // 将发放用户存入vuex中 解决发放用户过滤方法filteName不显示用户问题
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    addActives() {
      this.$router.push({
        name: 'wh:goodsActivity:createGoodsActivity'
      })
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getGivingCoursesList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 操作中的数据
    handleStatistics(id) {
      getGivingCoursesStatistics(
        id,
        {},
        (res) => {
          this.formViewData.show = true //点击数据查看 弹出弹窗
          this.formViewData.participateCount = res.participateCount //点击数据查看 参与量
          this.formViewData.productsCount = res.productsCount //点击数据查看 已赠商品数
          this.formViewData.receiveCount = res.receiveCount //点击数据查看 领取数量
        },
        (err) => {}
      )
    },
    // 操作中的点击详情
    handlerDetails(id) {
      getGivingCoursesDetail(
        id,
        {},
        (res) => {
          this.drawFormInline.dranData = res
          // Object.assign(this.drawFormInline, res)
          this.drawFormInline.drawer = true //点击详情时 弹出右侧抽屉
        },
        (err) => {}
      )
    },
    // 操作中的结束按钮
    handlerEnd(id) {
      stopGivingCourses(
        id,
        {},
        (res) => {
          this.searchList()
          this.$message({
            message: '活动已结束成功',
            type: 'success'
          })
        },
        (err) => {
          this.$message({
            message: err.message,
            type: 'error'
          })
        }
      )
    },
    // 删除活动
    handlerDelete(id) {
      deleteGivingCourses(
        id,
        {},
        (res) => {
          this.$message({
            message: '活动已删除成功',
            type: 'success'
          })
          this.searchList()
        },
        (err) => {
          this.$message({
            message: err.message,
            type: 'error'
          })
        }
      )
    },
    // 启动活动
    handlerEnabled(id) {
      startGivingCourses(
        id,
        {},
        (res) => {
          this.$message({
            message: '活动启用成功',
            type: 'success'
          })
          this.searchList()
        },
        (err) => {
          this.$message({
            message: err.message,
            type: 'error'
          })
        }
      )
    },
    // 打开弹窗
    handleAction(type, params = {}) {
      if (type === 'statistics') {
        this.handleStatistics(params.id)
        this.formViewData.name = params.name
        this.formViewData.activityNum = params.activityNum
        this.formViewData.activityStartTime = params.activityStartTime
        this.formViewData.activityEndTime = params.activityEndTime
      } else if (type === 'edit') {
        if (params.activityStatus === 'IN_PROGRESS') {
          this.editFormInline.id = params.id
          this.editFormInline.show = true //点击进行中的编辑 弹出弹窗
          this.editFormInline.startDate = params.activityStartTime
          this.editFormInline.endDate = params.activityEndTime
          this.editFormInline.activityTimeType =
            params.activityTimeData.activityTimeType
          this.editFormInline.activityEndTime = params.activityEndTime
        } else {
          this.$router.push({
            name: 'wh:goodsActivity:editGoodsActivity',
            query: { id: params.id }
          })
        }
      } else if (type === 'details') {
        this.handlerDetails(params.id)
      } else if (type === 'receiveHistory') {
        // 点击领取记录 进入二级页面
        this.$router.push({
          name: 'wh:goodsActivity:receiveRecord:list',
          query: { id: params.id, name: params.name }
        })
      } else if (type === 'start') {
        //点击启用时 弹窗
        this.$confirm('启用后可立即参与活动，是否立即启用活动？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.handlerEnabled(params.id)
          })
          .catch(() => {})
      } else if (type === 'delete') {
        //点击删除时的弹窗
        this.$confirm('删除后无法自动启用及查看，是否确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.handlerDelete(params.id)
          })
          .catch(() => {})
      } else if (type === 'end') {
        //点击结束时的弹窗
        this.$confirm('结束后将立即不可参与活动，是否立即结束活动？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.handlerEnd(params.id)
          })
          .catch(() => {})
      }
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    }
  }
}
</script>

<style lang="less"></style>
